<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'

import {userInfoStore} from '@/stores/useInfo'
import {loginApi} from "@/api/login";
import {ElMessage} from 'element-plus'
import {setUserInfoStorage} from "@/utils/storage";
//使用路由
const router = useRouter()


// 登录标题
let loginTitle = ref(['欢迎登录', '扫码登录'])
let loginIndex = ref(0)
let loginIsShow = ref(true)

//登录数据
const loginData = ref({
  account: '',
  password: 'hm#qd@23!'
})

//导入登录仓库
const useUserInfoStore = userInfoStore()

function goLogin() {
  useUserInfoStore.goLoginApi(loginData.value)
}


function changeLoginTitle(index: number) {
  loginIndex.value = index
  loginIsShow.value = index === 0 ? true : false
}

</script>

<template>
  <div class="login-head">
    <div class="login-header-heart">
      <div class="login-header-heart-left">
        <div class="logo"><img src="@/assets/img/logo.0940ebb5.png"></div>
        <div class="title"><span>欢迎登录</span></div>
      </div>
      <div class="login-header-heart-right" @click="router.push('/')">
        <span>进入网站首页</span>
        <i class="iconfont icon-xiangyou"></i>
        <i class="iconfont icon-xiangyou"></i>
      </div>
    </div>
  </div>
  <div class="login-body">
    <div class="login-body-form">
      <div class="login-body-form-title">
        <span v-for="(item, index) in loginTitle" :key="index" @click="changeLoginTitle(index)"
              :class="index === loginIndex ? 'active' : ''">{{ item }}</span>
      </div>
      <div class="login-body-form-list" v-if="loginIsShow">
        <div class="login-body-form-item">
          <i class="iconfont icon-dingwei"></i>
          <input type="text" placeholder="请输入账号" v-model="loginData.account"></input>
        </div>
        <div class="login-body-form-item">
          <i class="iconfont icon-dingwei"></i>
          <input type="password" placeholder="请输入密码" v-model="loginData.password"></input>
        </div>
        <div class="bth" @click="goLogin">登录</div>
        <div class="login-text">
          <span>忘记密码</span>
          <span>免费注册</span>
        </div>
      </div>
      <div class="login-body-form-qrcode" v-else>
        <div class="login-body-form-qrcode-img">
          <img src="@/assets/img/qrcode.5372a064.jpg">
        </div>
        <div class="login-body-form-qrcode-text">
          <span>打开</span>
          <span class="login-body-form-qrcode-text-app">小兔鲜儿APP</span>
          <span>扫码登录</span>
        </div>
      </div>

    </div>
  </div>
  <div class="login-footer">
    <div class="copyright-top">
      <ul class="copyright-top-ul">
        <li><a href="#">关于我们</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">配送与验收</a></li>
        <li><a href="#">商务合作</a></li>
        <li><a href="#">搜索推荐</a></li>
        <li><a href="#">友情链接</a></li>
      </ul>
    </div>
    <div class="copyright-bottom">
      <span>CopyRight ©</span>
    </div>
  </div>
</template>

<style scoped>
.login-head {
  width: 100%;
  background-color: #fff;
  height: 11rem;

}

.login-header-heart {
  width: 75%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.login-header-heart-left {
  display: flex;
  align-items: self-end;
  gap: 1.6rem;
}

.title span {
  display: inline-block;
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.83rem;
}

.logo {
  width: 16.6rem;
}

.logo img {
  width: 100%;
}

.login-header-heart-right {
  font-size: 1.33rem;
  display: flex;
  align-items: center;
}

.login-header-heart-right .iconfont {
  font-size: 1.3rem;
  color: var(--primary-color);
}

.login-body {
  width: 100%;
  height: 41rem;
  background-image: url("@/assets/img/login-bg.696efec3.png");
  background-repeat: no-repeat;
  background-size: 101%;
  position: relative;
}

.login-footer {
  width: max-content;
  margin: 0 auto;
  text-align: center;
}

.copyright-bottom {
  margin-top: 1.66rem;
}

.login-body-form {
  width: 32rem;
  background-color: #fff;
  padding: 0 2.5rem;
  position: absolute;
  right: 16.66rem;
  box-sizing: border-box;
  top: 50%;
  transform: translateY(-60%);
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, .3);
  border-radius: 0.1rem;
}

.login-body-form-title {
  display: flex;
  justify-content: space-between;
  padding: 1.66rem 0;
  box-sizing: border-box;
}

.login-body-form-title span {
  font-size: 1.5rem;
  cursor: pointer;
}

.active {
  color: var(--primary-color);
  font-weight: 600;
}

.login-body-form-item {
  width: 100%;
  display: flex;
  margin-bottom: 1.66rem;
}

.icon-dingwei {
  display: inline-block;
  width: 2.8rem;
  height: 2.8rem;
  background-color: #cfcdcd;
  line-height: 2.8rem;
  text-align: center;
  color: #fff;
}

.login-body-form-item input {
  width: 100%;
  height: 2.8rem;
  padding-left: 0.8rem;
  border: 1px solid transparent;
  box-sizing: border-box;
  outline: none;
}

.login-body-form-item input:focus {
  border: 1px solid var(--primary-color);
}

.bth {
  width: 100%;
  height: 3.33rem;
  background-color: var(--primary-color);
  color: #fff;
  font-size: 1.2rem;
  border: none;
  font-weight: 600;
  border-radius: 0.1rem;
  line-height: 3.33rem;
  cursor: pointer;
  text-align: center;
}

.login-text {
  margin-top: 1.66rem;
  font-size: 1.2rem;
  color: #999999;
  display: flex;
  gap: 1.25rem;
  justify-content: flex-end;
  padding-bottom: 1.66rem;
  box-sizing: border-box;
}

.login-footer {
  margin-top: 4.1rem;
}

.copyright-top-ul {
  display: flex;
  gap: 1.66rem;

}

.copyright-top-ul li a {
  padding-right: 1.66rem;
  border-right: 1px solid #999999;
  color: #999999;
  font-size: 1.2rem;
}

.copyright-bottom {
  font-size: 1.2rem;
  color: #999999;
}

.login-body-form-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.66rem;
  padding: 2.5rem 0;
  box-sizing: border-box;
}

.login-body-form-qrcode-text .login-body-form-qrcode-text-app {
  font-size: 1.3rem;
  color: var(--primary-color);
}

.login-body-form-qrcode-text span {
  font-size: 1.1rem;
  color: #999999;
}
</style>